<template>
    <div class="container" :loading="loadingBtn">
        <el-form label-width="90px" class="app-content" :rules="rules" :model="ruleForm" ref="ruleForm">
            <div class="box">
                <div class="appTitle"></div>
                <div class="appTop"></div>
                <el-row>
                    <el-col :span="8">
                        <el-form-item label="年级" prop='gradeId'>
                            <grade v-model="ruleForm.gradeId" :isDefaultFill='true' @defaultFillGrade='defaultFillGrade'></grade>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="8">
                        <el-form-item label="班级" prop='classId'>
                            <getClass v-model="ruleForm.classId" :isDefaultFill='true' @defaultFillClass='defaultFillClass' :grade='ruleForm.gradeId'></getClass>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="8">
                        <el-form-item label="班级宣言" prop='con'>
                            <el-input v-model="ruleForm.con"  type="textarea" :rows="6" placeholder="请输入内容,最大长度60位" 
                            :maxlength="60"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
                <div class="footer">
                    <el-button type="primary" @click="submitForm('ruleForm')" >保 存</el-button>
                </div>
            </div>
        </el-form>
    </div>
</template>
<script>
import school from 'components/SchoolClasss/school';
import grade from 'components/SchoolClasss/grade';
import getClass from 'components/SchoolClasss/class1';
import { mapGetters } from 'vuex';
import { saveCopyWrtier, getCopyWrtier} from 'api/wisdom';
export default{
    name: 'addSyllabus',
    components: {school, grade, getClass},
    data() {
        return {
            loadingBtn: true,
            ruleForm: {
                gradeId: '',
                classId: '',
                con: ''
            },
            rules: {
                gradeId: [
                    {required: true, message: '请选择年级', trigger: 'blur'}
                ],
                classId: [
                    {required: true, message: '请选择班级', trigger: 'blur'}
                ],
                con: [
                    { required: true, message: '请输入班级宣言', trigger: 'blur' },
                    { pattern: /^[^\s]+$/, message: '请勿输入空格', trigger: 'blur,change'}
                ]
            }
        }
    },
    computed: {
        ...mapGetters([
            'schoolId',
            'schoolName'
        ])
    },
    created() {
        // console.log('ooo');
    },
    watch: {
        'ruleForm.classId'(val) {
            if (this.ruleForm.gradeId&&val) {
                this._getCopyWrtier()// 回填
            }
        }
    },
    methods: {
        defaultFillGrade(gradeId) {
            this.ruleForm.gradeId=gradeId;
        },
        defaultFillClass(classId) {
            this.ruleForm.classId=classId;
        },
        _getCopyWrtier() {
            let json={
                fSchoolId: this.schoolId,
                fClassId: this.ruleForm.classId
            }
            getCopyWrtier(json).then(res => {
                this.loadingBtn=false
                this.ruleForm.con=res.data.content.sContent
            }).catch(() => {
                this.loadingBtn=false
            })
        },
        // 提交
        submitForm(formName) {
            this.$refs[formName].validate((valid) => {
                if (valid) {
                    this.$confirm('是否确认保存', ' ', {
                        confirmButtonText: '确定',
                        cancelButtonText: '取消'
                    }).then(() => {
                        this.loadingBtn = true;
                        let json={
                            fSchoolId: this.schoolId,
                            fClassId: this.ruleForm.classId,
                            sContent: this.ruleForm.con
                        }
                        saveCopyWrtier(json).then(res => {
                            this.loadingBtn = false;
                            this.$message.success('保存成功')
                        }).catch(() => {
                            this.loadingBtn = false;
                        })  
                    })
                }
            });
        }
    }
}
</script>

<style lang="scss" scoped>
.button{
    padding-left:30px;
}
.app-container {
    position: relative;
    padding: 20px 20px 10px;
    .app-levelbar {
        height: 35px;
    }
    .el-form{
        box-shadow:  0px 0px 5px 0px rgba(0, 0, 0, 0.1);
        -webkit-box-shadow:  0px 0px 5px 0px rgba(0, 0, 0, 0.1);
        background:#fff;
        padding-bottom:100px;
        .appTitle{
            padding-top:8px;
            text-align: center;
            font-size: 18px;
            color: #333;
            line-height: 72px;
            font-weight: bold;
            font-family: Microsoft YaHei;
        }
        .appTop{
            position: relative;
            font-size: 14px;
            color: rgb(106, 85, 72);
            padding-left: 16px;
            margin: 60px 0;
            display: block;
        }
        .box{
            padding: 0px 50px 0;
            background:#fff;
        }
       .footer{
            // text-align:center;
            margin-left: 16.5%;
            margin-top:40px;
        }
        .searchCon{
            margin-top:50px;
        }
    }
    
}

</style>
